<template>
    <el-container>
        <el-aside width="250px">
            <route-type @tree-node-click="routeClick"></route-type>
        </el-aside>
        <el-container>
            <el-header>
                <el-card  style="height: 750px">
                    <div slot="header" class="clearfix">
                        <el-input placeholder="请输入内容" style="width: 300px"></el-input>
                        <el-button type="primary" size="small" style="margin-left: 15px">搜索</el-button>
                        <el-button type="primary" size="small">批量导入</el-button>
                        <el-button type="primary" size="small">Excel导出</el-button>
                        <el-button type="primary" size="small">批量删除项目</el-button>
                    </div>
                    <div class="text item">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="status" label="状态" width="80" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium" type="info" v-if="scope.row.status === 0">{{scope.row.status | tranStatus}}</el-tag>
                                        <el-tag size="medium" type="success" v-if="scope.row.status === 1">{{scope.row.status | tranStatus}}</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="巡检计划概述" width="220" align="center"></el-table-column>
                            <el-table-column prop="execAndReview" label="执行人" width="150" align="center"></el-table-column>
                            <el-table-column prop="success" label="按时完成" width="120" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="margin: 3px">{{scope.row.success}}</p>
                                        <p class="success"><span>按时完成</span></p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="timeout" label="超时完成" width="120" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="margin: 3px">{{scope.row.timeout}}</p>
                                        <p class="timeout"><span>超时完成</span></p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="cancel" label="已取消" width="120" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="margin: 3px">{{scope.row.cancel}}</p>
                                        <p class="cancel"><span>已取消</span></p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="untreated" label="未处理" width="120" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="margin: 3px">{{scope.row.untreated}}</p>
                                        <p class="untreated"><span>未处理</span></p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                <template slot-scope="scope">
                                    <el-button type="success" size="small" @click="showRouteInfo(scope.row.routeId)">查看</el-button>
                                    <el-button type="danger" size="small"  @click="deleteRouteInfo(scope.row.routeId, scope.row.name)">删除</el-button>
                                    <el-button type="warning" size="small" @click="scope.row.status = 1" v-if="scope.row.status === 0">启动任务</el-button>
                                    <el-button type="warning" size="small" @click="scope.row.status = 0" v-if="scope.row.status === 1">设为无效</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination style="margin-top: 280px" :current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="12" :total="1" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </el-card>
            </el-header>
        </el-container>
        <route-info ref="routeInfo" v-if="RouteInfoVisible"></route-info>
    </el-container>
</template>

<script>
    import RouteType from './route-type'
    import CreateRoute from './addroute'
    import axios from 'axios'
    import RouteInfo from "./route-info";

    export default {
        name: "plan",
        components: {
            RouteInfo,
            RouteType,
            CreateRoute
        },
        data() {
            return {
                tableData: [],
                RouteInfoVisible: false,
                infoId: ''
            }
        },
        methods: {
            routeClick(data, node) {
                this.infoId = data.infoId;
                if (node.level === 1) {
                    this.getRouteExecutionInfo(data.infoId);
                }
            },
            getRouteExecutionInfo(infoId) {
                axios.get('http://gulimall.com/api/inspection/route/routeExecutionInfo', {
                    params: {infoId: infoId}
                }).then(
                    response => {
                        let infos = response.data.data;
                        for (let info of infos) {

                            info.execAndReview.replace('\n', '\n');
                            info.name.replace('\n','\n');
                        }
                        this.tableData = infos;
                    },
                    error => {console.warn('获取巡检计划执行情况出错');}
                );
            },
            showRouteInfo(id) {
                this.RouteInfoVisible = true;
                this.$nextTick(() => {
                    this.$refs.routeInfo.init(id);
                });
            },
            deleteRouteInfo(id, name) {
                this.$confirm(
                    `确定对【${name}】巡检路线进行删除操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    axios.get('http://gulimall.com/api/inspection/route/delete', {
                        params: {
                            routeId: id
                        }
                    }).then(
                        response => {
                            this.$message({
                                message: "删除操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.getRouteExecutionInfo(this.infoId);
                                }
                            });
                        }
                    );
                });
            }
        },
        filters: {
            tranStatus(type) {
                if (type === 1)
                    return '已生效';
                if (type === 0)
                    return '未启用';
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-table .cell {
        white-space: pre-line;
    }

    .success {
        background-color: #29c98b;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        text-align:center;
        line-height:20px;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .timeout {
        background-color: #7cc8f8;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        text-align:center;
        line-height:20px;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .cancel {
        background-color: #ddd;
        color: #36383c;
        border-radius: 5px;
        font-size: 14px;
        text-align:center;
        line-height:20px;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .untreated {
        background-color: #ff5a5a;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        text-align:center;
        line-height:20px;
        margin-top: 0;
        margin-bottom: 5px;
    }
</style>
